<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div#circel{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
				/*边框阴影 box-shadow 属性*/
				box-shadow: 5px 5px 50px 50px red inset;
			}
			/*思路2： div#triangle
			           css中：抓到div    【斜线】
					   左边框：50像素实线红色
					   右边框：50像素实线黄色
					   下边框：50像素实线黑色
			注意：先别加宽高  transparent 透明色  */
		   div#triangle{
			   width: 0;
			  /* border-left: 50px solid red transparent;
			   border-right: 50px solid yellow transparent;
			   border-bottom: 50px solid black;*/
			   /*两行：倒三角，蓝色，透明度 .3
			   提醒：所有边框：50px solid transparent
			        上边框颜色改成蓝色 0，0，255
			   */
			   border: 50px solid transparent;
			   border-top-color: rgba(0, 0, 255, .3);
		   }
		   /*outline 边框轮廓 只针对input 元素*/
		   input{
			   outline: 1px solid red;
		   }
		   /* 实际应用：通配选择器 去掉轮廓
		     { outline：0}
			*/
		</style>
	</head>
	<body>
		<div id="circel"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>